<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>文档</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
    <style type="text/css">
        body,
        html {
            background-color: #fff;
        }

        #chart {
            height: 400px;
            margin: 0 auto;
        }

        .censor-id {
            color: #c8c8c8;
            font-size: 14px;
            margin-left: 10px;
        }

        .update_time {
            font-size: 12px;
            margin-left: 10px;
        }

        .right-img-container {
            position: absolute;
            right: 10px;
            top: 11px;
            width: 100px;
            height: 30px;
        }

        .right-img-container img {
            width: 30px;
            height: 30px;
        }

        .right-img-container span {
            /*margin-left: 8px;*/
            font-size: 16px;
            line-height: 30px;
            float: right;
        }

        .tag-container {
            width: 300px;
            height: 30px;
            /*background-color: red;*/
            margin-top: 20px;
            margin-left: 10px;
        }

        .tag-container .tag1 {
            width: 50px;
        }

        .tag-container .tag2 {
            width: 120px;
            margin-left: 15px;
        }

        .tag-container .tag3 {
            width: 100px;
            margin-left: 15px;
        }

        .tag-gengeral {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-align: center;
            float: left;
            border-radius: 5px;
            box-shadow: 0 0 5px #c8c8c8;
        }
    </style>
</head>

<body>
    <div class="censor-id">sn:00001541578923100</div>
    <div class="update_time">更新时间：2018-06-01 23:33:38</div>
    <div class="right-img-container">
        <img src="..\..\image\mainFrame\co2.png">
        <span>433ppm</span>
    </div>
    <div class="tag-container">
        <div class="tag1 tag-gengeral">概述</div>
        <div class="tag2 tag-gengeral">间隔1小时</div>
        <div class="tag3 tag-gengeral">24小时内</div>
    </div>
    <div id="chart"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('chart'));
    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            label:{
              show:true
            }
        }]
    };
    myChart.setOption(option);
</script>

</html>
